<template>
  <div>
    <a-cascader :options="opts" v-model="val" :placeholder="placeholder"/>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelVal',
    event: 'change'
  },
  props: {
    modelVal: {
      type: Array,
      default: () => {
        return []
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    opts: {
      type: Array,
      default: () => {
        return [
          {
            value: '1',
            label: '外采流程',
            children: [{
              value: '11',
              label: 'XX表单',
              children: [{
                value: '111',
                label: 'XX1字段'
              },
              {
                value: '112',
                label: 'XX2字段'
              }]
            },
            {
              value: '12',
              label: 'XX表单'
            }]
          },
          {
            value: '2',
            label: '内销流程',
            children: [{
              value: '21',
              label: 'XX表单'
            },
            {
              value: '22',
              label: 'XX表单'
            }]
          }
        ]
      }
    }
  },
  data () {
    return {
      val: []
    }
  },
  mounted () {
    this.val = this.modelVal
  },
  watch: {
    modelVal (v) {
      this.val = v
    },
    val (v) {
      this.$emit('change', v)
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
</style>
